<template>
  <view class="padding-sm">
    <!-- 分类篮 -->
    <view class="main-cate">
      <view class="cu-bar bg-white margin-top-sm solid-bottom">
        <view class="action">
          <text class="cuIcon-title text-cyan"></text>
          <text class="text-xl text-bold">病情分类</text>
        </view>
      </view>
      <ill-sub @clickSub="changeSub" ref="mySub"></ill-sub>
    </view>

    <view class="scroll-view-container">
      <!-- ill_sub -->
      <scroll-view class="scroll-view" scroll-y :scroll-with-animation="true">
        <block v-for="(item,i) in educationList" :key="item.id">
          <view class="education-item" @click="() => getDetail(item)">
            <!-- 左侧图片区域 -->
            <view class="education-item-left">
              <image :src="item.defaultPic || defaultPic" class="education-pic"></image>
            </view>

            <!-- 信息区域 -->
            <view class="education-item-right">
              <!-- 教育标题 -->
              <view class="education-title">{{item.title}}</view>
              <!-- 发布时间 -->
              <view class="education-publish-time text-gray ">发布时间：{{item.publishTime}}</view>
            </view>
          </view>
        </block>

        <!-- 加载更多 -->
        <view class="scroll-view-button flex align-center justify-center" @click="loadMoreData">
          <view class="left-button text-lg">
            <text class="lg text-lg text-gray cuIcon-move"></text>
          </view>
          <text space="emsp" class="button-text">
            {{' ' + '加载更多' + ' '}}
          </text>
          <view class="right-button text-lg">
            <text class="lg text-lg text-gray cuIcon-move"></text>
          </view>
        </view>
      </scroll-view>

    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 请求参数对象
        paramObj: {
          // 病情分类Id
          subId: '',
          // 页码值
          pageNum: 1,
          // 每页显示多少条数据
          pageSize: 10,
        },
        // 是否正在请求数据
        isloading: false,
        // 默认图片
        defaultPic: 'https://gonitis-lush.oss-cn-chengdu.aliyuncs.com/static/default/undefinedBg.png',
        // 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度
        // 健康指导
        educationList: [],
        // 滚动条距离顶部的距离
        total: 0,
        firstLoad: true
      };
    },
    methods: {
      // 跳转到底部
      scrollToBottom() {
        this.$nextTick(() => {
          uni.pageScrollTo({
            scrollTop: 9999, // 设置一个很大的值，确保滚动到底部
            duration: 300, // 滚动动画的时长
          });
        })
      },
      // 跳转到顶部
      scrollToTop() {
        this.$nextTick(() => {
          uni.pageScrollTo({
            scrollTop: 0, // 设置一个很大的值，确保滚动到底部
            duration: 100, // 滚动动画的时长
          });
        })
      },
      // 下拉重载方法
      onPullDownRefresh() {
        // 重新加载数据
        this.resetData();
        this.loadMoreData();
      },
      // 加载更多数据
      loadMoreData() {
        // 如果已经没有更多数据或正在加载中，则不再进行加载
        if (this.paramObj.pageNum !== 1 && this.educationList.length >= this.total) {
          uni.$showMsg('数据已加载完毕!');
          return;
        } else if (this.isLoading) {
          uni.$showMsg('正在玩命加载中!');
          return;
        }
        this.fetchData();
      },
      // 重新赋值
      resetData() {
        this.educationList = [];
        this.total = 0;
        this.paramObj.pageNum = 1;
      },
      changeSub(subId) {
        this.paramObj.subId = subId;
        this.resetData();
        this.loadMoreData();
        this.scrollToTop();
      },
      async fetchData() {
        if (!this.paramObj.subId) {
          return;
        }
        this.isLoading = true;
        const {
          data: res
        } = await uni.$http.get('/education/list', this.paramObj)
        // 判断是否获取失败
        if (res.code !== 200) return uni.$showMsg()
        if (this.paramObj.pageNum === 1) {
          // 下拉重载，清空原有数据
          this.educationList = res.data.list;
        } else {
          // 上拉加载，追加数据
          this.educationList = [...this.educationList, ...res.data.list];
          this.scrollToBottom();
        }
        this.total = res.data.totalCount;
        this.paramObj.pageNum++;
        this.isLoading = false; // 标记为加载完成
        if (this.firstLoad) {
          // 解除第一次加载
          this.firstLoad = false;
        }
      },
      getDetail(item) {
        uni.navigateTo({
          url: '/subpkg/education_detail/education_detail?id=' + item.id
        })
      },
    },
  }
</script>

<style lang="scss">
  .main-cate {
    margin-bottom: 10px;
    border-radius: 5px;
    padding: 5px;
    height: 115px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    position: sticky;
    top: 0;
    z-index: 999;
  }

  .scroll-view-container {
    .scroll-view-button {
      font-size: 12px;
    }
    position: relative;
    flex-direction: column;
    display: flex;

    .scroll-view {
      margin-top: 0px;

      .education-item {
        /* // 设置盒模型为 border-box */
        box-sizing: border-box;
        display: flex;
        padding-bottom: 10px;
        padding-top: 10px;
        border: 1px solid #eaeaea;
        /* 设置边框样式 */
        border-radius: 5px;
        /* 设置边框圆角 */
        border-bottom: 1px solid #f0f0f0;
        background-color: white;

        .education-item-left {
          margin-right: 5px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .education-pic {
            margin-left: 5px;
            border-radius: 3px;
            width: 100px;
            height: 60px;
            display: block;
          }
        }

        .education-item-right {
          display: flex;
          flex: 1;
          flex-direction: column;
          justify-content: space-between;

          .education-title {
            font-size: 12px;
          }

          .education-publish-time {
            font-size: 12px;
          }
        }
      }
    }
  }
</style>